import React, { useState, useEffect } from 'react';
import { Card, Avatar, Icon, Spin, Tooltip } from 'antd';
import _ from 'lodash';
import { formatDate, formatEmployee } from '../utils';
import { Attachment } from './index';
import styles from './styles.less';
import { useMailInfo, useAvatarUrl } from '../hooks';

// 邮箱内容详情
const MailInfo = ({ location }) => {
    const { mailId, mailType = 'in' } = location.query;
    const [loading, data] = useMailInfo(mailId);

    // 取出发送列表和抄送列表的邮箱
    const [mailList, setMailList] = useState([]);
    useEffect(() => {
        // 监听当前拉取的数据列表，返回邮箱地址数组
        if (!_.isEmpty(data)) {
            // 获取收件列表的邮箱，去重，移除空元素
            setMailList([
                ..._.remove(
                    _.uniq([data.sender.toLowerCase(), ...data.receiverList.split(','), ...data.ccList.split(',')]),
                    v => v !== ''
                )
            ]);
        }
    }, [data]);

    // 通过邮件列表拉取头像
    const { resData: avatarList } = useAvatarUrl(mailList);

    return (
        <div className={styles.mailContentWrap}>
            <Card
                bodyStyle={{ padding: '22px 24px 4 0px', height: 'calc(100vh - 25px)', overflowY: 'auto' }}
                className={styles.mailContentBox}
            >
                <Spin spinning={loading}>
                    {_.size(data) > 0 && (
                        <>
                            <div className={styles.mailContentUserBar}>
                                <Avatar
                                    icon="user"
                                    size={40}
                                    src={
                                        formatEmployee(
                                            avatarList,
                                            mailType === 'in'
                                                ? data.sender.toLowerCase()
                                                : data.receiverList.split(',')[0].toLowerCase()
                                        ).url
                                    }
                                />
                                <ul>
                                    <li>{formatEmployee(avatarList, data.sender).name}</li>
                                    <li>
                                        发送给&nbsp;
                                        {!_.isEmpty(data.receiverList) &&
                                            data.receiverList.split(',').map((item, index) => {
                                                const arr = data.receiverList.split(',');
                                                return (
                                                    <Tooltip title={item} placement="right">
                                                        <span>
                                                            {formatEmployee(avatarList, item).name}
                                                            {arr.length > 1 && index !== arr.length - 1 ? '，' : ''}
                                                        </span>
                                                    </Tooltip>
                                                );
                                            })}
                                    </li>
                                    {data.ccList && (
                                        <li>
                                            抄送给&nbsp;
                                            {!_.isEmpty(data.ccList) &&
                                                data.ccList.split(',').map((item, index) => {
                                                    const arr = data.ccList.split(',');
                                                    return (
                                                        <Tooltip title={item} placement="right">
                                                            <span>
                                                                {formatEmployee(avatarList, item).name}
                                                                {arr.length > 1 && index !== arr.length - 1 ? '，' : ''}
                                                            </span>
                                                        </Tooltip>
                                                    );
                                                })}
                                        </li>
                                    )}
                                </ul>
                                <span className={styles.date}>{formatDate(data.sendDate)}</span>
                            </div>
                            <div
                                className={styles.content}
                                // TODO：http://wiki.vv.cn:8090由于wiki邮箱带这个base，导致本地路由出问题，暂时过滤掉，后面看怎么处理吧
                                // eslint-disable-next-line react/no-danger
                                dangerouslySetInnerHTML={{
                                    __html:
                                        _.size(data.htmlContent) > 0 &&
                                        data.htmlContent
                                            .replace(/<base[^>]*>[\s\S]*?<\/[^>]*>/gi, '')
                                            .replace(/<a /gi, '<a target="_blank" ')
                                }}
                            ></div>
                            {data.attachmentList && data.attachmentList.length > 0 ? (
                                <div className={styles.attachments}>
                                    <p>
                                        <Icon type="paper-clip" style={{ fontSize: 14, marginRight: 5 }} />
                                        附件{data.attachmentList.length}个
                                    </p>
                                    <Attachment attachmentList={data.attachmentList} type="down" />
                                </div>
                            ) : null}
                        </>
                    )}
                </Spin>
            </Card>
        </div>
    );
};

export default MailInfo;
